<template>
  <div>
    <div style="margin: 10px 0;">
      <el-input placeholder="请输入姓名查询" v-model="nickName" clearable style="width: 200px"></el-input>
      <el-input placeholder="请输入手机号查询" v-model="phone" clearable style="width: 200px;margin-left: 5px"></el-input>
      <el-input placeholder="请输入地址查询" v-model="address" clearable style="width: 200px;margin-left: 5px"></el-input>
      <el-button type="primary" icon="el-icon-search" style="margin-left: 5px" @click="search">查询</el-button>
      <el-button type="warning" icon="el-icon-refresh" style="margin-left: 5px" @click="reset">重置</el-button>
    </div>
    <div style="margin: 10px 0;">
      <el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true">新增</el-button>
      <el-button type="danger" icon="el-icon-delete" @click="delBatch">批量删除</el-button>
      <el-button type="primary" icon="el-icon-edit">批量区域修改</el-button>
      <el-button type="primary" icon="el-icon-bottom">批量区域地点修改</el-button>
    </div>


    <el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 100%"
              :header-cell-style="{background:'#e7e8ef',color:'#4f5257'}"
              fixed border>
      <el-table-column
          prop="id"
          type="selection"
          width="40">
      </el-table-column>
      <el-table-column prop="userName" label="用户名" width="100">
      </el-table-column>
      <el-table-column prop="nickName" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="address" label="地址" width="180">
      </el-table-column>
      <el-table-column prop="role" label="角色信息" width="100">
      </el-table-column>
      <el-table-column prop="phone" label="手机号" width="120">
      </el-table-column>
<!--      <el-table-column prop="idCard" label="身份证" width="160">-->
<!--      </el-table-column>-->
      <el-table-column prop="email" label="邮箱" >
      </el-table-column>
      <el-table-column prop="localName" label="所属区域" width="180">
      </el-table-column>
      <el-table-column prop="locale" label="场所类别" width="100"
                       :filters="[{ text: '学校', value: '学校' }, { text: '企业', value: '企业' },{text: '社区',value: '社区'}]"
                       :filter-method="findLocal"
                       filter-placement="bottom-end">
        <template slot-scope="scope">
          <div v-if="scope.row.locale!=''">
            <el-tag :type="scope.row.locale === '社区' ? 'success' : 'warning'" disable-transitions>{{scope.row.locale}}</el-tag>
          </div>
        </template>

      </el-table-column>
      <!-- <el-table-column prop="birthday" label="出生日期" width="180">
      </el-table-column> -->
      <el-table-column
          label="操作"
          width="180">
        <template slot-scope="scope">
          <el-button type="success" class="el-icon-edit" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm
              style="margin-left: 5px"
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="handleDelete(scope.$index, scope.row)"
          >
            <el-button type="danger" size="mini" class="el-icon-remove-outline" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>

    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>


    <el-dialog
        title="用户信息"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">

      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="用户名">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="角色选择">
          <template slot-scope="scope">
            <el-select clearable v-model="form.role" placeholder="请选择角色" style="width: 100%;">
              <el-option v-for="i in roles"  :label="i.name" :value="i.mark">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="场所选择">
          <template slot-scope="scope">
            <el-select clearable v-model="form.locale" placeholder="请选择场所" @change="localeChane" style="width: 100%;">
              <el-option v-for="i in locales"  :label="i.name" :value="i.name">
                <span style="float: left">{{ i.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ i.id }}</span>
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="场所地点选择">
          <template slot-scope="scope">
            <el-select clearable v-model="form.localName" placeholder="请选择场所地点" style="width: 100%;">
              <el-option v-for="i in localNames"  :label="i.localeName" :value="i.localeName">
                <span style="float: left">{{ i.localeName }}</span>
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.nickName"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.passWord"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
             <el-button type="primary" @click="save">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "User",
  data(){
    return{
      phone:"",
      nickName:"",
      address:"",
      tableData:[],
      currentPage: 4,
      pageNum:0,
      pageSize:5,
      total:0,
      dialogVisible: false,
      form: {},
      ids:[],
      multipleSelection: [],
      roles: [],
      locales: [],
      localNames: [],
    }
  },
  created() {
    this.load()
  },
  methods:{
    reset(){
      this.address="";
      this.phone="";
      this.nickName="";
      this.load()
      this.$message({
        message: '重置成功',
        type: 'success'
      });
    },
    search(){
      if (this.address!='' || this.nickName!='' || this.phone!=''){
        this.load()
        this.$message({
          message: '查询成功',
          type: 'success'
        });
      }else{
        this.$message({
          message: '请输入查询内容',
          type: 'warning'
        });
      }
    },
    findLocal(value, row){
      return row.locale === value;
    },
    load(){
      this.request.get("/user/page",{
            params:{
              pageNum:this.pageNum,
              pageSize:this.pageSize,
              nickName:this.nickName,
              address:this.address,
              phone:this.phone
            }
          }
      ).then(res =>{
        this.tableData=res.data.records
        this.total=res.data.total
      })
      //从后台获取角色
      this.request.get("/role").then(res =>{
        this.roles = res.data
      })
      //从后台获取区域
      this.request.get("/locale").then(res =>{
        this.locales = res.data
      })

    },
    //从后台获取区域场所地点
    localeChane(val){
      console.log(val)
      // this.from.localName={}
      this.request.get("/localName/byLocale/"+val).then(res =>{
        this.localNames = res.data
      })
    },
    save(){
      this.request.post("/user",this.form).then(res => {
        if (res.data){
          this.$message.success("保存成功")
          this.dialogVisible=false
          this.form={}
          this.load()
        }else {
          this.$message.error(res.message)
        }
      })
    },
    handleEdit(row) {
      this.form=row
      this.dialogVisible=true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    handleDelete(index, row) {
      this.request.delete("/user/"+(index,row).id).then(res=>{
        if (res.code===200){
          this.load()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }else {
          this.$message.error(res.message)
        }
      })
    },
    delBatch(){
      let ids = this.multipleSelection.map(v =>v.id)
      if (ids.length!=0){
        this.$confirm('你正在进行批量删除操作, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.request.post("/user/batch/", ids).then(res => {
            if (res.code===200){
              this.load()
              this.$message({
                type: 'success',
                message: '批量删除成功!'
              });
            }else {
              this.$message({
                type: 'error',
                message: res.message
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }else {
        this.$message.warning("请选择删除记录")
      }
    },
    /**
     * 选择框
     * */
    handleSelectionChange(val) {
      this.multipleSelection = val;
      for (let i=1; i<=val; i++)
        console.log(this.multipleSelection[i])
    },
    /**
     * 自定义操作列
     * @param index
     * @param row
     */


    handleSizeChange(val) {
      this.pageSize = val;
      this.load()
    },
    handleCurrentChange(val) {
      this.pageNum=val
      this.load()
    }
  }
}
</script>

<style scoped>

</style>